<template>
  <Transition
    :mode-class="['slide-top']"
    :show="showMenu"
    :style="{
      background: themeConfig.menuBackground,
      color: themeConfig.menuTextColor,
      boxShadow: `2rpx 4rpx 6rpx ${themeConfig.menuShadowColor}`,
    }"
    class="reader__up"
  >
    <text class="iconfont icon-arrow-left" @click="handleBack"></text>
    <text class="reader__up-text">{{ chapterInfo }}</text>
    <view class="reader__up-ops">
      <text
        class="iconfont icon-listen"
        title="听书"
        @click="handleListen"
      />
      <text
        class="iconfont icon-share"
        title="分享"
        @click="handleShare"
      />
    </view>
  </Transition>
</template>

<script>
import Transition from '@/components/Transition';
import { mapState, mapGetters } from 'vuex';

export default {
  name: 'up-setting',

  components: {
    Transition,
  },

  computed: {
    ...mapGetters(['themeConfig']),
    ...mapState({
      bookid: (state) => state.reader.bookid,
      name: (state) => state.reader.name,
      chapterInfo: (state) => state.reader.chapterInfo,
      chapterNum: (state) => state.reader.chapterNum,
      theme: (state) => state.reader.theme,
      showMenu: (state) => state.reader.showMenu,
    }),
  },

  data() {
    return {};
  },

  methods: {
    handleBack() {
      uni.navigateBack();
    },

    handleShare() {
      this.$store.commit('updateReader', { showMenu: false });
      this.$emit('open-share');
    },

    handleListen() {
      uni.navigateTo({
        url: `/pages/listen/index?book=${this.bookid}&chapter=${this.chapterNum}&num=0`,
      });
    },
  },
};
</script>

<style lang="scss">
.reader__up {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 88rpx;
  background: #fff;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  font-size: $font-lg;
  padding: 0 10rpx;
  // box-shadow: 2rpx 4rpx 6rpx rgba(26, 26, 26, 0.2);

  .iconfont {
    font-size: 40rpx;
    padding: 8rpx;
  }

  .icon-arrow-left {
    font-weight: 600;
  }

  &-text {
    flex: 1;
    margin-left: 10rpx;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 28rpx;
  }

  &-ops {
    .iconfont {
      margin-right: 8px;

      &:active {
        font-weight: 600;
      }
    }

    .iconfont:last-child {
      margin-right: 0;
    }
  }
}
</style>
